<template>
  <div class='container'>
    <el-card >
      <!-- 头部 -->
      <el-form size="small"   :inline="true" status-icon  label-width="100px" class="demo-ruleForm">
          <el-form-item label="学科名称" >
           <el-input v-model="pagination.subjectName" type="text" style="width:220px" ></el-input>
       </el-form-item>
       <el-form-item>
    <el-button @click="clear">清除</el-button>
    <el-button type="primary" @click='search'>搜索</el-button>
  </el-form-item>
  <el-form-item  style="float: right;">
  <el-button type="success" size="small" icon="el-icon-edit"  @click="openDialog()">新增学科</el-button>
     </el-form-item>
      </el-form>
      <!-- 灰色 -->
      <el-alert
       :title="`数据一共${total}条`"
       type="info"
       show-icon
       :closable="false">
  </el-alert>
    <!-- 表格 -->
    <el-table
    class="tableBox"
    stripe:true
    :data="tableData">
    <el-table-column style="height:50px" type="index" :index="indexMethod" label="序号" >
     </el-table-column>
    <el-table-column prop="subjectName" label="学科名称" width="100px">
    </el-table-column>
    <el-table-column prop="username" label="创建者" width="160px">
    </el-table-column>
    <el-table-column prop="addDate" label="创建日期" width="170px">
       <template #default="{ row }">
              {{ row.time | formatDay }}
            </template>
    </el-table-column>
    <el-table-column prop="isFrontDisplay" label="前台是否显示" width="160px">
      <template #default={row}>
         {{row.isFrontDisplay===1?'是':'否'}}
      </template>
    </el-table-column>
    <el-table-column prop="twoLevelDirectory" label="二级目录">
    </el-table-column>
    <el-table-column prop="tags" label="标签">
    </el-table-column>
    <el-table-column  prop="totals" label="题目数量" >
    </el-table-column>
    <el-table-column label="操作"  width="300px">
       <template #default="{row}">
              <el-button type="text" size="small" @click="$router.push(`directorys?id=${row.id}`)">学科分类</el-button>
              <el-button type="text" size="small" @click="$router.push(`tags?id=${row.id}&name=${encodeURIComponent(row.subjectName)}`)">学科标签</el-button>
              <el-button type="text" size="small" @click="openDialog(row)">修改</el-button>
              <el-button type="text" size="small" @click="delSubject(row.id)">删除</el-button>
            </template>
    </el-table-column>
  </el-table>
  <!-- 分页器 page-size 下拉框选每页条数-->
    <el-pagination
      style="float: right;"
      background
       layout="prev, pager, next, sizes, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.page"
      :page-sizes="[5, 10, 12, 15]"
      :page-size="pagination.pagesize"
     :total="total">
       </el-pagination>
      <!-- 对话框 -->
    <SubjectsAdd  ref="subjectsadd" :newData="newData" @update="update()"></SubjectsAdd>
    </el-card>
    </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import SubjectsAdd from '@/module-hmmm/components/subjects-add.vue'
export default {
  name: 'subjects',
  components: { SubjectsAdd },
  data () {
    return {
      tableData: [], // 表格的数据
      pagination: {
        page: 1, // 当前页  填写框的
        pagesize: 10, // 每页条数
        subjectName: ''
      },
      total: 0,
      value: true,
      newObject: {},
      newData: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取学科列表
    async getList () {
      // console.log(111)
      const { data: { counts, items } } = await list(this.pagination)
      // console.log(res)
      this.total = counts
      this.tableData = items
    },
    // 处理页码 每页几条
    handleSizeChange (val) {
      // console.log(val)
      this.pagination.pagesize = val
      this.pagination.page = 1
      this.getList()
    },
    // 输入框 跳到第几页
    handleCurrentChange (val) {
      // console.log(val)
      this.pagination.page = val
      this.getList()
    },
    // 点击清除
    clear () {
      // console.log(111)
      this.pagination = {
        page: 1, // 当前页  填写框的
        pagesize: 10, // 每页条数
        subjectName: ''
      }
    },
    // 处理序号问题
    indexMethod (index) {
      return index + 1 + this.pagination.pagesize * (this.pagination.page - 1)
    },
    // 点击搜索
    async search () {
      // console.log(1212)
      this.pagination.page = 1
      this.getList()
    },
    // 删除
    async  delSubject (sub) {
      // console.log(1111)
      await this.$confirm('此操作将永久删除该学科, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const res = await remove({ id: sub })
      console.log(res)
      this.$message.success('删除学科成功')
      this.getList()
    },
    // 更新增加
    update () {
      if (!this.newObject.id) {
        this.pagination.page = 1
      }
      this.getList()
    },
    // 编辑修改
    async openDialog (data = {}) {
      this.newData = data
      this.$nextTick(() => {
        // 先赋值，再打开对话框 ref能获取子组件的数据
        this.$refs.subjectsadd.openDialog()
      })
      // console.log()
      // this.newObject = res.data
    }

  }
}
</script>

<style scoped lang='scss'>
.container{
  margin: 12px 12px;
}
</style>
